<!DOCTYPE html>
<!--
  Copyright 2016 Google Inc. All rights reserved.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License
-->
<html class="mdl-typography">
  <head>
    <meta charset="utf-8">
    <title>MDL Checkbox Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="assets/material-design-lite.css.js" charset="utf-8"></script>
    <style media="screen">
      section {
        margin-top: .5rem;
        padding: 0 .5rem 1rem .5rem;
      }

      .mdl-theme--dark {
        background: #262626;
        color: white;
      }

      .mdl-theme--dark > h2 {
        margin-top: 0;
      }

      /* Example of manually theming a checkbox. Note that this does not take JS-provided animations
         into account. */
      .mdl-theme--dark .mdl-checkbox__native-control:checked:not(:disabled) ~ .mdl-checkbox__background,
      .mdl-theme--dark .mdl-checkbox__native-control:indeterminate:not(:disabled) ~ .mdl-checkbox__background {
        background-color: #E91E63;
        border-color: #E91E63;
      }
      .mdl-theme--dark .mdl-checkbox__background::before {
        background-color: #E91E63;
      }
      .mdl-theme--dark .mdl-checkbox__checkmark__path {
        stroke: #262626 !important;
      }
      .mdl-theme--dark .mdl-checkbox__mixedmark {
        background-color: #262626;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>MDL Checkbox</h1>
      <section>
        <h2>Basic Example, no Javascript</h2>
        <div class="mdl-form-field">
          <div class="mdl-checkbox">
            <input type="checkbox"
                   id="basic-checkbox"
                   class="mdl-checkbox__native-control"/>
            <div class="mdl-checkbox__background">
              <svg version="1.1"
                   class="mdl-checkbox__checkmark"
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
                   xml:space="preserve">
                <path class="mdl-checkbox__checkmark__path"
                      fill="none"
                      stroke="white"
                      d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
              </svg>
              <div class="mdl-checkbox__mixedmark"></div>
            </div>
          </div>
          <label for="basic-checkbox" id="basic-checkbox-label">This is my checkbox</label>
        </div>
        <button type="button" onclick="document.getElementById('basic-checkbox').indeterminate = true;">Make indeterminate</button>
        <button type="button" onclick="this.parentElement.hasAttribute('dir') ? this.parentElement.removeAttribute('dir') : this.parentElement.setAttribute('dir', 'rtl');">Toggle RTL</button>
        <button type="button" onclick="document.querySelector('.mdl-form-field').classList.toggle('mdl-form-field--align-end');">Toggle Align End</button>
        <button type="button" onclick="document.getElementById('basic-checkbox').disabled = !document.getElementById('basic-checkbox').disabled;">Toggle Disabled</button>
      </section>
      <section>
        <h2>With Javascript</h2>
        <div class="mdl-form-field">
          <div id="mdl-js-checkbox" class="mdl-checkbox">
            <input type="checkbox"
                   id="my-checkbox"
                   class="mdl-checkbox__native-control"/>
            <div class="mdl-checkbox__background">
              <svg version="1.1"
                   class="mdl-checkbox__checkmark"
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
                   xml:space="preserve">
                <path class="mdl-checkbox__checkmark__path"
                      fill="none"
                      stroke="white"
                      d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
              </svg>
              <div class="mdl-checkbox__mixedmark"></div>
            </div>
          </div>
          <label for="my-checkbox" id="my-checkbox-label">This is my checkbox</label>
        </div>
        <button type="button" id="make-ind">Make indeterminate</button>
      </section>
      <section class="mdl-theme--dark">
        <h2>Dark Theme</h2>
        <div class="mdl-form-field">
          <div id="mdl-checkbox-dark" class="mdl-checkbox mdl-checkbox--theme-dark">
            <input type="checkbox"
                   id="checkbox-dark"
                   class="mdl-checkbox__native-control"/>
            <div class="mdl-checkbox__background">
              <svg version="1.1"
                   class="mdl-checkbox__checkmark"
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
                   xml:space="preserve">
                <path class="mdl-checkbox__checkmark__path"
                      fill="none"
                      stroke="white"
                      d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
              </svg>
              <div class="mdl-checkbox__mixedmark"></div>
            </div>
          </div>
          <label for="checkbox-dark" id="dark-checkbox-label">This is my checkbox</label>
        </div>
        <button type="button" onclick="document.getElementById('checkbox-dark').disabled = !document.getElementById('checkbox-dark').disabled;">Toggle Disabled</button>
      </section>
    </main>
    <script src="assets/material-design-lite.js" charset="utf-8"></script>
    <script>
      (function(global) {
        'use strict';
        var MDLCheckbox = global.mdl.checkbox.MDLCheckbox;
        var checkbox = new MDLCheckbox(document.getElementById('mdl-js-checkbox'));
        document.getElementById('make-ind').addEventListener('click', function() {
          checkbox.indeterminate = true;
        });
      })(this);
    </script>
  </body>
</html>
